<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
      <el-breadcrumb-item>晚归列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-input placeholder="请输入学号或姓名"
                size="small "
                v-model="input">
        <el-button slot="append"
                   icon="el-icon-search"></el-button>
      </el-input>
      <el-table :data="tableData">
        <el-table-column prop="studentNum"
                         label="学号"
                         width="180">
        </el-table-column>
        <el-table-column prop="name"
                         label="姓名"
                         width="180">
        </el-table-column>
        <el-table-column prop="BCLtime"
                         label="晚归时间">
        </el-table-column>
        <el-table-column prop="cause"
                         label="晚归原因">
        </el-table-column>
        <el-table-column prop="tower"
                         label="楼宇">
        </el-table-column>
        <el-table-column prop="dorm"
                         label="宿舍号">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pagenum"
                     :page-sizes="[1, 3, 5, 7]"
                     :page-size="pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { formDate } from 'commonjs/formatDate.js'
export default {
  name: 'CBLstudents',
  props: [''],
  data () {
    return {
      input: '',
      tableData: [],
      total: 0,
      // 当前页码
      pagenum: 1,
      // 每页显示几条数据
      pagesize: 7
    }
  },

  components: {},

  computed: {},

  created () {
    this.getBCLdata()
  },

  mounted () { },

  methods: {
    // 获取晚归数据
    async getBCLdata () {
      const { data: res } = await this.$axios.get('/tower/findCBlate', {
        params: {
          tower: window.localStorage.getItem('tower'),
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      console.log(res)
      if (res.meta.code === 200) {
        res.studentlist.map(valid => {
          valid.BCLtime = formDate(valid.BCLtime)
        })
        this.tableData = res.studentlist
        this.total = res.total
      }
    },
    handleSizeChange (size) {
      this.pagesize = size
      this.getBCLdata()
    },
    handleCurrentChange (currentPage) {
      // console.log(`当前页: ${currentPage}`)
      this.pagenum = currentPage
      // 这里也需要重新请求一下数据
      this.getBCLdata()
    },
    handleDelete (id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$axios.post('/tower/delCBL', {
          id
        })
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getBCLdata()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },

  watch: {}

}

</script>
<style lang='less' scoped>
.el-input {
  width: 400px;
}
</style>
